<div class="cd-col-form"
     *cdFormLoading="loading">
  <ng-container [ngSwitch]="step">
    <!-- Configuration step -->
    <div *ngSwitchCase="1">
      <form name="form"
            #formDir="ngForm"
            [formGroup]="configForm"
            novalidate>
        <div class="card">
          <div class="card-header"
               i18n>Step {{ step }} of 2: Telemetry report configuration</div>
          <div class="card-body">
            <p i18n>The telemetry module sends anonymous data about this Ceph cluster back to the Ceph developers
              to help understand how Ceph is used and what problems users may be experiencing.<br/>
              This data is visualized on <a href="https://telemetry-public.ceph.com/">public dashboards</a>
              that allow the community to quickly see summary statistics on how many clusters are reporting,
              their total capacity and OSD count, and version distribution trends.<br/><br/>
              The data being reported does <b>not</b> contain any sensitive data like pool names, object names, object contents,
              hostnames, or device serial numbers. It contains counters and statistics on how the cluster has been
              deployed, the version of Ceph, the distribution of the hosts and other parameters which help the project
              to gain a better understanding of the way Ceph is used. The data is sent secured to {{ sendToUrl }} and
              {{ sendToDeviceUrl }} (device report).</p>
            <div *ngIf="moduleEnabled">
              The plugin is already <b>enabled</b>. Click <b>Deactivate</b> to disable it.&nbsp;
              <button type="button"
                      class="btn btn-light"
                      (click)="disableModule('The Telemetry module has been disabled successfully.')"
                      i18n>Deactivate</button>
            </div>
            <legend i18n>Channels</legend>
            <p i18n>The telemetry report is broken down into several "channels", each with a different type of information that can
              be configured below.</p>

            <!-- Channel basic -->
            <div class="form-group row">
              <label class="cd-col-form-label"
                     for="channel_basic">
                <ng-container i18n>Basic</ng-container>
                <cd-helper>
                  <ng-container i18n>Includes basic information about the cluster:</ng-container>
                  <ul>
                    <li i18n>Capacity of the cluster</li>
                    <li i18n>Number of monitors, managers, OSDs, MDSs, object gateways, or other daemons</li>
                    <li i18n>Software version currently being used</li>
                    <li i18n>Number and types of RADOS pools and CephFS file systems</li>
                    <li i18n>Names of configuration options that have been changed from their default (but not their values)</li>
                  </ul>
                </cd-helper>
              </label>
              <div class="cd-col-form-input">
                <div class="custom-control custom-checkbox">
                  <input type="checkbox"
                         class="custom-control-input"
                         id="channel_basic"
                         formControlName="channel_basic">
                  <label class="custom-control-label"
                         for="channel_basic"></label>
                </div>
              </div>
            </div>

            <!-- Channel crash -->
            <div class="form-group row">
              <label class="cd-col-form-label"
                     for="channel_crash">
                <ng-container i18n>Crash</ng-container>
                <cd-helper>
                  <ng-container i18n>Includes information about daemon crashes:</ng-container>
                  <ul>
                    <li i18n>Type of daemon</li>
                    <li i18n>Version of the daemon</li>
                    <li i18n>Operating system (OS distribution, kernel version)</li>
                    <li i18n>Stack trace identifying where in the Ceph code the crash occurred</li>
                  </ul>
                </cd-helper>
              </label>
              <div class="cd-col-form-input">
                <div class="custom-control custom-checkbox">
                  <input type="checkbox"
                         class="custom-control-input"
                         id="channel_crash"
                         formControlName="channel_crash">
                  <label class="custom-control-label"
                         for="channel_crash"></label>
                </div>
              </div>
            </div>

            <!-- Channel device -->
            <div class="form-group row">
              <label class="cd-col-form-label"
                     for="channel_device">
                <ng-container i18n>Device</ng-container>
                <cd-helper i18n-html
                           html="Includes information about device metrics like anonymized SMART metrics.">
                </cd-helper>
              </label>
              <div class="cd-col-form-input">
                <div class="custom-control custom-checkbox">
                  <input type="checkbox"
                         class="custom-control-input"
                         id="channel_device"
                         formControlName="channel_device">
                  <label class="custom-control-label"
                         for="channel_device"></label>
                </div>
              </div>
            </div>

            <!-- Channel ident -->
            <div class="form-group row">
              <label class="cd-col-form-label"
                     for="channel_ident">
                <ng-container i18n>Ident</ng-container>
                <cd-helper>
                  <ng-container i18n>Includes user-provided identifying information about the cluster:</ng-container>
                  <ul>
                    <li>Cluster description</li>
                    <li>Contact email address</li>
                  </ul>
                </cd-helper>
              </label>
              <div class="cd-col-form-input">
                <div class="custom-control custom-checkbox">
                  <input type="checkbox"
                         class="custom-control-input"
                         id="channel_ident"
                         formControlName="channel_ident"
                         (click)="toggleIdent()">
                  <label class="custom-control-label"
                         for="channel_ident"></label>
                </div>
              </div>
            </div>

            <!-- Channel perf -->
            <div class="form-group row">
              <label class="cd-col-form-label"
                     for="channel_perf">
                <ng-container i18n>Perf</ng-container>
                <cd-helper>
                  <ng-container i18n>Includes various performance metrics of a cluster.</ng-container>
                </cd-helper>
              </label>
              <div class="cd-col-form-input">
                <div class="custom-control custom-checkbox">
                  <input type="checkbox"
                         class="custom-control-input"
                         id="channel_perf"
                         formControlName="channel_perf">
                  <label class="custom-control-label"
                         for="channel_perf"></label>
                </div>
              </div>
            </div>

            <ng-container *ngIf="showContactInfo">
            <legend>
              <ng-container i18n>Contact Information</ng-container>
              <cd-helper i18n>Submitting any contact information is completely optional and disabled by default.</cd-helper>
            </legend>
            <div class="form-group row">
              <label class="cd-col-form-label"
                     for="contact"
                     i18n>Contact</label>
              <div class="cd-col-form-input">
                <input id="contact"
                       class="form-control"
                       type="text"
                       formControlName="contact"
                       placeholder="Example User <user@example.com>">
              </div>
            </div>
            <div class="form-group row">
              <label class="cd-col-form-label"
                     for="description"
                     i18n>Description</label>
              <div class="cd-col-form-input">
                <input id="description"
                       class="form-control"
                       type="text"
                       formControlName="description"
                       placeholder="My first Ceph cluster"
                       i18n-placeholder>
              </div>
            </div>
            <div class="form-group row">
              <label class="cd-col-form-label"
                     for="organization"
                     i18n>Organization</label>
              <div class="cd-col-form-input">
                <input id="organization"
                       class="form-control"
                       type="text"
                       formControlName="organization"
                       placeholder="Organization name"
                       i18n-placeholder>
              </div>
            </div>
          </ng-container>
            <legend i18n>Advanced Settings</legend>
            <div class="form-group row">
              <label class="cd-col-form-label"
                     for="interval">
                <ng-container i18n>Interval</ng-container>
                <cd-helper i18n>The module compiles and sends a new report every 24 hours by default. You can
                  adjust this interval by setting a different number of hours.</cd-helper>
              </label>
              <div class="cd-col-form-input">
                <input id="interval"
                       class="form-control"
                       type="number"
                       formControlName="interval"
                       min="8">
                <span class="invalid-feedback"
                      *ngIf="configForm.showError('interval', formDir, 'min')"
                      i18n>The entered value is too low! It must be greater or equal to 8.</span>
              </div>
            </div>
            <div class="form-group row">
              <label class="cd-col-form-label"
                     for="proxy">
                <ng-container i18n>Proxy</ng-container>
                <cd-helper>
                  <p i18n>If the cluster cannot directly connect to the configured telemetry endpoint
                    (default telemetry.ceph.com), you can configure a HTTP/HTTPS proxy server by e.g. adding
                    https://10.0.0.1:8080</p>
                  <p i18n>You can also include a user:pass if needed e.g. https://ceph:telemetry@10.0.0.1:8080</p>
                </cd-helper>
              </label>
              <div class="cd-col-form-input">
                <input id="proxy"
                       class="form-control"
                       type="text"
                       formControlName="proxy"
                       placeholder="https://10.0.0.1:8080">
              </div>
            </div>
            <br />
            <p i18n><b>Note:</b> By clicking 'Next' you will first see a preview of the report content before you
              can activate the automatic submission of your data.</p>
          </div>
          <div class="card-footer">
            <div class="button-group text-right">
              <button type="button"
                      class="btn btn-light"
                      (click)="next()">
                <ng-container>{{ actionLabels.NEXT }}</ng-container>
              </button>
            </div>
          </div>
        </div>
      </form>
    </div>

    <!-- Preview step -->
    <div *ngSwitchCase="2">
      <form name="previewForm"
            #frm="ngForm"
            [formGroup]="previewForm"
            novalidate>
        <div class="card">
          <div class="card-header"
               i18n>Step {{ step }} of 2: Telemetry report preview</div>
          <div class="card-body">
            <!-- Telemetry report ID -->
            <div class="form-group row">
              <label i18n
                     for="reportId"
                     class="cd-col-form-label">Report ID
              <cd-helper i18n-html
                         html="A randomized UUID to identify a particular cluster over the course of several telemetry reports.">
              </cd-helper>
              </label>
              <div class="cd-col-form-input">
                <input class="form-control"
                       type="text"
                       id="reportId"
                       formControlName="reportId"
                       readonly>
              </div>
            </div>

            <!-- Telemetry report -->
            <div class="form-group row">
              <label i18n
                     for="report"
                     class="cd-col-form-label">Report preview
                <cd-helper i18n-html
                           html="The actual telemetry data that will be submitted."><em>Note: Please select 'Download' to
                                   view the full report, including metrics from the perf channel.</em>
                </cd-helper>
              </label>
              <div class="cd-col-form-input">
                <textarea class="form-control"
                          id="report"
                          formControlName="report"
                          rows="15"
                          readonly></textarea>
              </div>
            </div>
            <div class="form-group row">
              <div class="cd-col-form-offset">
                <div class="btn-group"
                     role="group">
                  <cd-download-button [objectItem]="report"
                                      fileName="telemetry_report">
                  </cd-download-button>
                  <cd-copy-2-clipboard-button source="report">
                  </cd-copy-2-clipboard-button>
                </div>
              </div>
            </div>

            <!-- License agreement -->
            <div class="form-group row">
              <div class="cd-col-form-offset">
                <div class="custom-control custom-checkbox">
                  <input type="checkbox"
                         class="custom-control-input"
                         id="licenseAgrmt"
                         name="licenseAgrmt"
                         formControlName="licenseAgrmt">
                  <label class="custom-control-label"
                         for="licenseAgrmt"
                         i18n>I agree to my telemetry data being submitted under the <a href="https://cdla.io/sharing-1-0/">Community Data License Agreement - Sharing - Version 1.0</a></label>
                </div>
              </div>
            </div>
          </div>
          <div class="card-footer">
            <div class="button-group text-right">
              <cd-form-button-panel (submitActionEvent)="onSubmit()"
                                    (backActionEvent)="back()"
                                    [form]="previewForm"
                                    [submitText]="actionLabels.UPDATE"
                                    [cancelText]="actionLabels.BACK"></cd-form-button-panel>
            </div>
          </div>
        </div>
      </form>
    </div>
  </ng-container>
</div>
